<template>
  <div id="found" class="found">
    <div class="steps">
      <el-steps :active="active" align-center>
        <el-step title="确认账户信息"></el-step>
        <el-step title="设置新密码"></el-step>
      </el-steps>
    </div>

    <div class="signup-wrap">
      <div class="signup">
        <h1>找回密码</h1>
        <div class="form">
          <div class="mailform">
            <div class="mail-adress">
              <input
                type="password"
                class="fl"
                v-model="password"
                placeholder="请输入密码,6-16为字母、数字、符号的组合"
                autocomplete="off"
                tabindex="1"
              />
            </div>
            <div class="passwd">
              <input class="fl" type="password" v-model="repassword" placeholder="再次确认输入密码" />
            </div>
          </div>
        </div>
        <div class="submit" @click="next">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password:null,
      repassword:null,
      active: 2
    };
  },
  methods: {
    next() {
      if(!this.password || !this.repassword){
        this.$message.error("请检查密码是否输入合法！")
      }else{
        if(this.password != this.repassword){
           this.$message.error("密码输入不一致！")
        }else{
          this.axios.put("/user/update",{
            "password":this.password
          }).then((resp)=>{
            if(resp.code == 0){
                this.$message.success("成功修改密码，成功跳转到主页！")
                this.$router.push("/");
            }else{
                 this.$message.error("操作非法,修改密码失败！")
            }
          })
        }
      }
    }
  }
};
</script>

<style scoped>
#found {
  margin-top: 160px;
  margin-bottom: 50px;
  /* background-color: aqua; */
}

/* 步骤条 */
.steps {
  width: 700px;
  height: 16px;
  margin: 0 auto;
  padding-top: 44px;
  margin-bottom: 40px;
}

/* 注册框位置 */
.signup-wrap {
  width: 360px;
  height: auto;
  margin: 0 auto;
  padding: 0 80px;
  background-color: #fff;
}

/* 注册框 */
.signup {
  width: 100%;
  text-align: center;
}

/* 标题 */
.signup h1 {
  font-size: 24px;
  margin-bottom: 27px;
}

/* 其他方式注册 */
.signup-type {
  height: 12px;
  line-height: 12px;
  margin-bottom: 11px;
}
.signup-type a {
  display: block;
  color: #0076a4;
}
.signup-type a:hover {
  text-decoration: underline;
  outline: 0;
}
/* 文本框 */

.mail-adress,
.imglCode,
.passwd,
.repasswd {
  position: relative;
  height: 50px;
}
.imglCode,
.passwd,
.repasswd {
  margin-top: 20px;
}
.form input {
  padding-left: 14px;
  width: 348px;
  border-radius: 0;
}
.form input {
  height: 50px;
  width: 95%;
  line-height: 22px;
  font-size: 15px;
  background: none;
  outline: none;
  border: 1px solid #ddd;
}
.form input::-webkit-input-placeholder {
  color: #8a8a8a;
}
.form .imgCode,
.form .mailCode {
  width: 154px;
}
.form .passwd {
  /* width: 292px; */
  height: 55px;
  /* padding-right: 32px; */
  overflow: hidden;
}
.form input:focus {
  border: 2px solid #29a3d6;
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;
}

/* 按钮 */
.submit {
  margin-top: 30px;
  margin-bottom: 20px;
  display: block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
  background-color: #29a3d6;
  text-decoration: none;
}
.submit:hover {
  background-color: #0076a4;
  cursor: pointer;
}

/* 其他登录方式 */
.three-account-wrap {
  height: 40px;
}
.three-account {
  height: 100%;
  width: 220px;
  display: inline;
}
.three-account .sina,
.three-account .tencent,
.three-account .wechat {
  margin-right: 8%;
  opacity: 0.7;
}
.three-account .sina img,
.three-account .tencent img,
.three-account .wechat img {
  height: 40px;
  width: 40px;
}
.three-account .sina:hover,
.three-account .tencent:hover,
.three-account .wechat:hover {
  opacity: 1;
  cursor: pointer;
}
.goto-login p {
  height: 22px;
  line-height: 22px;
  text-align: right;
  color: #777;
}
.goto-login p a {
  color: #0076a4;
}
.goto-login p a:hover {
  text-decoration: underline;
  outline: 0;
}
</style>
